
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网桥信息管理</title>
    <!-- <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../css/global.css" rel="stylesheet">
</head>

<body>
	<!--1.0 narbar -->
    <div   class="fixedNavbar">
       <#include "../navbar.html">
	</div>

    <div class="container-fluid">
    	<!--2.0 left sidebar -->
    	<div class="row">
        	<#include "../sidebar.html">

            <!--2.1 main content -->
            <div class="col-md-10">
		            <ul id="myTab" class="nav nav-tabs" role="tablist">
		                <li class="active"><a href="#box-manage" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-globe"></i>&nbsp;网桥信息</a>
		                </li>
		            </ul>
		            <div id="myTabContent" class="tab-content" style="margin-top:10px;">
		                <div class="tab-pane active" id="box-manage">
		                    <div class="panel panel-default" id="purchasersList">
		                        <div class="panel-heading">
		                            <form class="form-inline" role="form">
		                                <div class="form-group">
		                                  <label for="companyName" class="control-label">公司</label>
		                                  <input type="text" class="form-control" id="companyName" placeholder="公司名">
		                                </div>
                                        <div class="form-group">
                                          <label for="owner" class="control-label">使用者</label>
                                          <input type="text" class="form-control" id="owner" placeholder="使用者">
                                        </div>
                                        <div class="form-group">
                                          <label for="boxId" class="control-label">网桥ID</label>
                                          <input type="text" class="form-control" id="boxId" placeholder="网桥ID">
                                        </div>
                                        <div class="form-group">
                                          <label for="address" class="control-label">地址</label>
                                          <input type="text" class="form-control" id="address" placeholder="地址">
                                        </div>
		                                <button type="submit" class="btn btn-primary">查询</button>
		                            </form>
		                        </div>
		                    </div>
		                </div>
		            </div>

		            <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>公司名称</th>
                                <th>网桥ID</th>
                                <th>使用者</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="dataList">
                            <tr>
                                <td>广州NOC科技有限公司</td>
                                <td>4008-1023</td>
                                <td>NOC管理员</td>
                                <td>2015-03-30 00:00:00</td>
                                <td style="text-align:center;">
                                	<a href="#" class="view-box btn btn-danger btn-sm">查看</a>&nbsp;&nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td>中山市雄志科技有限公司</td>
                                <td>4008-1041</td>
                                <td>雄志科技管理员</td>
                                <td>2016-05-10 00:00:00</td>
                                <td style="text-align:center;">
                                	<a href="#" class="view-box">查看</a>&nbsp;&nbsp;
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <nav>
					  	<div class="row" style="text-align:center">
		                    <ul id="example" class="pagination">
		                    </ul>
		                </div>
					</nav>

            </div>
        </div>
    </div>
    <script src="../js/bootstrap/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap/bootstrap.min.js"></script>
    <script src="../js/bootstrap-paginator.js"></script>
    <script src="../js/_x_ctr_location-1.0.min.js"></script>
    <script src="../js/jquery.iframe-transport.js"></script>
    <script src="../js/jquery.validate.js"></script>
    <script src="../js/WdatePicker.js"></script>
    <script src="../js/jquery.tablesorter.min.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/common/pageConfig.js?v=12312432"></script>
    <script src="../js/common/pageUtil.js"></script>
	<script src="../js/util.js"></script>
	<script src="../js/sha1.js"></script>
    
    <script>
        $(function(){
        	
        	/* 分页功能*/
        	var params= {
        			pageNo:Page.getConstant('PAGE_NO'),
        			pageSize:Page.getConstant('PAGE_SIZE'),
        		};
        	
        	loadData(params);
        	 
            //分页插件options
            function onPageChanged(event, oldPage, newPage){
            	loadData({
        			pageNo:newPage,
        			pageSize:Page.getConstant('PAGE_SIZE'),
        		});
            }
            var options = {
    		  	bootstrapMajorVersion: 3, //版本
                currentPage: Page.getConstant('PAGE_NO'), //当前页数
                totalPages: Page.getConstant('PAGE_SIZE'), //总页数
                itemTexts: function (type, page, current) {
                  switch (type) {
                    case "first":
                      return "首页";
                    case "prev":
                      return "上一页";
                    case "next":
                      return "下一页";
                    case "last":
                      return "末页";
                    case "page":
                      return page;
                  }
                },//点击事件，用于通过Ajax来刷新整个list列表
                onPageChanged:onPageChanged
              };
            
            function fillData(data){
            	$.each(data,function(index,item){
            		var html="";
            		html=html+
            			'<tr >'+
	            			'<td>'+item.organization.companyName+'</td>'+
	            			'<td value="'+ item.boxId+'">'+item.boxId+'</td>'+
	            			'<td value="'+ item.supervisor.id+'">'+item.supervisor.realname+'</td>'+
	            			'<td>'+item.createTime+'</td>'+
	            			'<td style="text-align:center;">' + 
	            				//'<a href="' +'viewBoxInfo?id='+ item.id +'"' +  'class="view-box btn btn-danger btn-sm">查看</a>&nbsp;&nbsp;'+
	            				'<a href="#"' +  'class="view-box btn btn-danger btn-xs">查看</a>&nbsp;&nbsp;'
	            				'</td>'+
            			'</tr>'
            			$("#dataList").append(html);
    			});
            }
            
            function loadData(params){
            	$("#dataList").empty();
	            common.post('/eoip/web/getBoxListByPage',params,function(data){
	            	   data = $.parseJSON(data);
	             	   var pageCount = data.totalPage;
	         		   var currentPage = data.pageNo;
	         		   
	         		   options.currentPage=currentPage;
	         		   options.totalPages=pageCount;
	         		   
	         		   fillData(data.dataList);
	         	       $('#example').bootstrapPaginator(options);
	             });
            }//end loadData
            
        });
    </script>
</body>
</html>
